
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Welcome to JPetStore!</title>
  <link rel="stylesheet" href="css/main.css">
  <style>
    @font-face {
      font-family: 'winterCat';
      src: url("font/WinterCat.otf");
    }

    @font-face {
      font-family: 'huayuan';
      src: url("font/花园肉丸.ttf");
    }

    .main {
      /*大小设置*/
      width: 100vm;
      height: 100vh;

      /*位置关系*/
      position: relative;

      /*背景图片*/
      background-image: url("img/cat_2.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-position: center -110px;
      overflow: hidden;
    }

    .welcome {
      width: 100vmax;
      /*位置*/
      position: relative;
      top: 170px;
      text-align: center;
      margin: 0 auto;

      /*字体*/
      font-family: winterCat;
      font-size: 70px;
      color: white;
    }

    .buttonClass {
      width: 50%;
      position: relative;
      top: 340px;
      display: flex;
      flex-direction: row;
      margin: 0 auto;
    }

    .buttonClass button {
      width: 240px;
      height: 80px;
      border-radius: 14px;
      border: none;
      background-color: antiquewhite;
      opacity: 60%;
      font-size: 22px;
      font-family: huayuan;
      color: rgb(244, 183, 103);
      display: block;
      margin: 0 auto;
      padding: 5px;
      cursor: pointer;
    }

    .buttonClass button span {
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }

    .buttonClass button span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
    }

    .buttonClass button:hover span {
      padding-right: 25px;
    }

    .buttonClass button:hover span:after {
      opacity: 1;
      right: 0;
    }

    .buttonClass a {
      color: rgb(244, 183, 103);
      display: block;
      margin: 0 auto;
    }

    .trCorner #userInfo{
      background-color: #fff;

    }

    a:visited{
      color: beige;
    }
  </style>
</head>

<body>
<div class="main">
  <div class="welcome">
    <p>WELCOME TO JPETSTORE</p>
  </div>
  <div class="buttonClass">
    <a href="signOnForm"><button><span>登录</span></button></a>
    <a href="mainForm"><button><span>以游客身份浏览</span></button></a>
  </div>
  <div class="top">
    <a href="mainForm">
      <div class="tlCorner" ></div>
    </a>
    <div class="trCorner">
      <ul>
        <li>店铺介绍</li>
        <li><a href="./help.html">帮助</a></li>
        <li>联系我们</li>
<%--        <li id="userInfo"></li>--%>
      </ul>
    </div>
  </div>
</div>
</body>

</html>
